<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="WaterChart">
// import { ECOption } from "@/components/ECharts/config";
// import echarts from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch } from "vue";

const props = defineProps({
  data: {
    type: Object,
    required: false,
    default: () => ({})
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  }
});

watch(
  () => props.data,
  () => {
    setOption();
  }
);

const option: any = reactive({
  series: [
    {
      type: "liquidFill",
      radius: "80%",
      z: 6,
      center: ["50%", "50%"],
      waveAnimation: 0.3, // 动画时长
      amplitude: 6, // 振幅
      color: ["#5499ED"],
      data: [],
      backgroundStyle: {
        borderWidth: 1,
        color: "#A7CBF5"
      },
      label: {
        normal: {
          color: "#fff",
          textStyle: {
            fontSize: 24,
            padding: [10, 0, 0, 0],
            rich: {
              a: {
                fontSize: 16,
                padding: [10, 0, 0, 0]
              }
            }
          },
          formatter: params => {
            let newValue = params.value * 100;
            return newValue + "%";
          }
        }
      },
      outline: {
        show: true,
        itemStyle: {
          borderWidth: 0
        },
        borderDistance: 0
      }
    }
  ]
});

const setOption = () => {
  if (props.data) {
    option.series[0].data = [props.data.percent || 0];
    if (props.data.name) {
      option.series[0].label.normal.formatter = params => {
        let newValue = params.value * 100;
        return newValue + "%" + "\n" + `{a|${props.data.name}}`;
      };
    }
  }
  if (props.colorList.length === 2) {
    option.series[0].color = props.colorList[0];
    option.series[0].backgroundStyle.color = props.colorList[1];
  }
};

onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
